<!--
 * @Author: your name
 * @Date: 2021-08-24 10:47:09
 * @LastEditTime: 2021-09-14 14:56:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\Contents\page.vue
-->
<template>
  <div class="rotuerContent">
    <div class="rotuerContent_header">
      <Row :gutter="[10, 10]" type="flex" justify="space-between">
        <Col :xs="{ span: '24' }" :lg="{ span: '14' }">
          <Row :gutter="[10, 10]">
            <Col :xs="{ span: '16' }" :lg="{ span: '6' }">
              <Input default-value="0571" />
            </Col>
            <Col :xs="{ span: '4' }" :lg="{ span: '2' }">
              <Button type="primary" ghost>
                <svg-icon icon-class="search" size="1"></svg-icon>
              </Button>
            </Col>
            <Col :xs="{ span: '4' }" :lg="{ span: '3' }">
              <Button type="primary" ghost> <svg-icon icon-class="search" size="1"></svg-icon><span> 批类删除</span> </Button>
            </Col>
          </Row>
        </Col>
        <Col :xs="{ span: '24' }" :lg="{ span: '6' }">
          <Row :gutter="[10, 10]" type="flex" justify="end">
            <Col :xs="{ span: '5' }" :lg="{ span: '6' }">
              <InputGroup style="width: 100%" compact>
                <Select default-value="启用">
                  <SelectOption value="启用"> 启用 </SelectOption>
                  <SelectOption value="禁用"> 禁用 </SelectOption>
                </Select>
              </InputGroup>
            </Col>
            <Col :xs="{ span: '4' }" :lg="{ span: '6' }">
              <Button class="btn" type="primary" ghost> <svg-icon icon-class="search" size="1"></svg-icon><span> 刷新</span> </Button>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
    <div class="rotuerContent_table">
      <Table :data-source="routerTree" :row-selection="rowSelection" :expanded-row-keys="expandedRowKeys" :expand-row-by-click="true" size="middle" :columns="columns" @expand="onexpand">
        <template #Other="{ record }">
          <!-- 删除 -->
          <Button class="btns" type="danger" shape="circle" @click.stop="handleClick(record)">
            <svg-icon icon-class="checkbox" size="1"></svg-icon>
          </Button>
          <!-- 编辑 -->
          <Button class="btns" type="info" shape="circle" @click.stop="handleClick(record)">
            <svg-icon icon-class="form" size="1"></svg-icon>
          </Button>
          <!-- 禁用 -->
          <Button class="btns" type="primary" shape="circle" @click.stop="handleClick(record)">
            <svg-icon icon-class="log" size="1"></svg-icon>
          </Button>
        </template>
      </Table>
    </div>
  </div>
</template>
<script lange="ts">
import { defineComponent, ref, unref } from 'vue';
import { $ } from '../../../ntils/EventBus';
import { vaxios, SetAesEncryLocal, GetAeDecryptLocal } from '../../../ntils/hooks';
import { store } from '../../../store/index';
import { Table, Tag, Row, Col, Input, Select } from 'ant-design-vue';

export default defineComponent({
  name: 'LayPage',
  components: { Table, TableItem: Table.Column, Tag, Row, Col, Input, InputGroup: Input.Group, Select, SelectOption: Select.Option },
  setup() {
    let columns = [
      {
        title: 'title',
        dataIndex: 'title',
        key: 'title'
      },
      {
        title: 'Roles',
        dataIndex: 'roles',
        key: 'roles'
      },
      {
        title: 'Tags',
        key: 'tags',
        dataIndex: 'tags',
        scopedSlots: { customRender: 'tags' }
      },
      {
        title: 'Other',
        key: 'Other',
        dataIndex: 'Other',
        slots: { customRender: 'Other' }
      }
    ];
    const routerData = store.state.routerArr;
    let routerTree = ref([]);
    function filterTree(arr, index) {
      let result = [];
      arr.forEach((e, i) => {
        result.push({
          title: e.name,
          key: `${index}${i + 1}`,
          tags: e.path,
          roles: e.roles.join(','),
          children: filterTree(e.children, i + 1)
        });
      });
      return result;
    }
    routerTree.value = filterTree(routerData, '');
    console.log(routerTree.value);
    // 事件
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
      },
      getSelectRowKeys(e) {
        console.log(e);
      },
      setSelectedRowKeys(e) {
        console.log(e);
      }
    };
    let expandedRowKeys = ref();
    expandedRowKeys.value = [];
    const onexpand = (expanded, record) => {
      if (expanded) {
        expandedRowKeys.value.push(record.key);
      } else if (expandedRowKeys.value.length) {
        expandedRowKeys.value = expandedRowKeys.value.filter(e => e != record.key);
      }
    };
    // 点击删除
    const handleClick = key => {
      console.log(key);
    };
    return {
      routerTree,
      expandedRowKeys,
      rowSelection,
      columns,
      onexpand,
      handleClick
    };
  }
});
</script>
<style lang="less" scoped>
.rotuerContent_header {
  margin-bottom: 10px;
  background: #fff;
  padding: 10px 10px;
  box-sizing: border-box;
}
.btns {
  margin: 0 5px;
}
.btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  span {
    font-size: 13px;
    margin-left: 5px;
  }
}
</style>
